<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="../../build/aui-css/css/bootstrap.css">
    <script src="../../build/aui/aui.js"></script>
    <style>
        .modal-content {
            overflow: hidden;
        }
    </style>
</head>
<body class="yui3-skin-sam">
    <h1>AlloyUI - Modal</h1>
    <div id="content"></div>
    <script>
    YUI({ filter:'raw' }).use('aui-modal', 'resize-proxy', function(Y) {

        console.time('How long does it take?');

        var modal = new Y.Modal({
            bodyContent: 'One fine body…',
            centered: true,
            cssClass: 'foo',
            destroyOnHide: true,
            headerContent: '<h4 class="modal-title">Modal header</h4>',
            // height: 400,
            modal: true,
            render: '#content',
            visible: true,
            // draggable: false,
            // resizable: {
            //     handles: 'br, r',
            //     plugins: [
            //         { fn: Y.Plugin.ResizeProxy }
            //     ]
            // },
            // toolbars: {
            //     header: [
            //         { icon: 'glyphicon glyphicon-camera' },
            //     ],
            //     body: [
            //         { label: 'Body' }
            //     ],
            //     footer: [
            //         { icon: 'Footer' }
            //     ]
            // }
        }).render();

        modal.addToolbar([
            {
                label: 'Cancel',
                on: {
                    click: function() { modal.hide(); }
                }
            },
            {
                label: 'Okay',
                on: {
                    click: function() { alert('This is the primary action!'); }
                },
                primary: true
            }
        ]);

        console.timeEnd('How long does it take?');

    });
    </script>
</body>
</html>